<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-datepicker>
				<div class="mask">
					<date-picker
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>
			<template #slot-select>
				<div class="mask">
					<el-select
						size="mini"
						placeholder="选择状态"
						filterable
						v-model="status"
						style="margin-right: 10px;"
						@change="val => refresh({ scene: val, page: 1 })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="补贴收入" :value="0"></el-option>
						<el-option label="维权扣款" :value="1"></el-option>
						<el-option label="发起提现" :value="2"></el-option>
						<el-option label="提现失败退回" :value="3"></el-option>
						<el-option label="提现手续费" :value="4"></el-option>
						<el-option label="提现失败退回手续费" :value="5"></el-option>
						<el-option label="红包兑换" :value="6"></el-option>
						<el-option label="红包订单失效扣款" :value="7"></el-option>
						<el-option label="嗨返APP首单奖励" :value="8"></el-option>
						<el-option label="首单奖励失效扣款" :value="9"></el-option>
					</el-select>
				</div>
			</template>

			<template #table-column-userInfo="{scope}">
				<div class="user">
					<img
						v-if="scope.row.headUrl"
						class="user-img"
						:src="scope.row.headUrl | image_ali"
						alt=""
					/>
					<img v-else class="user-img" src="@/assets/images/head_icon.png" alt="" />
					<div style="text-align:left;">
						<div>用户昵称：{{ scope.row.nickName || '--' }}</div>
					</div>
				</div>
			</template>
			<template #table-column-createTime="{scope}">
				{{ scope.row.createTime | format_date }}
			</template>
			<!-- scene 场景 -->
			<template #table-column-scene="{scope}">
				<div>
					{{ scope.row.scene | scene_type }}
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import platform from '@/mixin/platform';
import moment from 'moment';

export default {
	data() {
		return {
			crud: null,
			status: ''
		};
	},
	components: {
		DatePicker
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.statisticalForm.incomelog)
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '用户信息',
							prop: 'userInfo',
							align: 'center',
							emptyText: '--'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center',
							emptyText: '--'
						},
						{
							label: '金额',
							prop: 'amount',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '场景',
							prop: 'scene',
							align: 'center'
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						}
					],

					op: {
						visible: false
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '150px'
					},
					items: []
				})
				.set('layout', [
					['refresh-btn', 'slot-datepicker', 'slot-select', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { list } = await next(params);
					list.map(e => {
						e.amount = '￥' + (e.amount || 0);
					});
				})
				.done();

			app.refresh({
				prop: 'createTime',
				order: 'desc',
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>

<style lang="scss">
.mask {
	margin-left: 10px;
}
.user {
	display: flex;
	flex-direction: column;
	align-items: center;
	.user-img {
		min-width: 64px;
		height: 64px;
	}
}
</style>
